<template>
    <div style="height: 100px;">
        <div class="component-header">
            <div class="header-content">

                <div class="h-left">
                  <el-image src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" class="img" @click="ToHomePage"/>
                  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                           active-text-color="#4285f4">
                    <el-menu-item index="1" @click="change1"
                                  style="font-weight: 800;font-size: large;">我的课程</el-menu-item>
                    <el-menu-item index="2" @click="change2"
                                  style="font-weight: 800;font-size: large;">备课区</el-menu-item>
                    <el-menu-item index="3" @click="change3"
                                  style="font-weight: 800;font-size: large;">虚拟研讨室</el-menu-item>
                    <el-menu-item index="3" @click="change4"
                                  style="font-weight: 800;font-size: large;">智能体(AI助教)</el-menu-item>
                  </el-menu>
                </div>


                  <div class="main-header-right">
                    <div v-for ="(item,index) in menu" :key="index" class="header-menu" @click="toHeaderPage(item.path)">
                      <span>{{item.name}}</span>
                    </div>
                    <RightHeader style="margin-top: 15px"/>
                  </div>

            </div>
        </div>
    </div>
</template>
<script>
import RightHeader from '../RightHeader.vue'
import { Message } from 'element-ui'
export default {
    name: 'teacherMainPage',
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            activeIndex: '1',
          menu: [
            {
              name: 'ai工具集',
              path: '/taskManagement'
            },
            {
              name:'论文查重',
              path: '/taskManagement'
            },
            {
              name:'任务管理',
              path: '/taskManagement'
            }
          ],
        }
    },

    methods: {
      toHeaderPage(path) {
        this.$router.push(path)
      },
        ToHomePage() {
            this.$router.push('/')
        },
        change1() {
            Message({message: '已经在此页了！'})
            // this.$router.push("/main")
        },
        change2() {
            this.$router.push("/lessonPreparationArea")
        },
        change3() {
            this.$router.push("/teachingResseach")
        },
      change4() {
        this.$router.push("/ai")
      },
        // ToUserSetting() {
        //     this.$router.push("/userSetting")
        // }
    },
    components: {
        RightHeader
    }
}
</script>
<style scoped>
.component-header {
    height: 64px;
    width: 1660px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.header-content {
    position: relative;
    background-color: #fff;
    top: 0;
    left: 0;
    height: 80px;
    padding: 0 28px;
    display: flex;
    flex-flow: row nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px #ccc;
}

.h-left {
    cursor: pointer;
    flex: 4;
    display: flex;
    .logo-img {
        cursor: pointer;
        margin: 0 auto;

        .img {
            width: 120px;
            height: 50px;
        }
    }
}
.main-header-right{
  display: flex;
}
.main-header-right .header-menu{
  margin-right: 20px;
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  margin-left: 20px;
  width: 100px;
  cursor:  pointer;
}

.el-menu-demo {
    flex: 3;
  padding: 10px ;
}
.main-header .img{
  width: 135px;
  height: 38px;
  margin: 10px 40px 5px 20px;
  padding: 15px 0 10px 10px;
}
</style>